<template>
    <div>
              <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                  :immediate-check="false"
               >
            <van-cell v-for="data in datalist" :key="data.id" @click="handlechange(data.filmId)">
                <img :src="data.poster" >
                <div class="section">
                  <div class="title">{{data.name}}</div>
                  <div class="center">
                    <div class="actors">主演：{{data.actors | actorsFilter}}</div>
                    <div>观众评分：<span class="grade">{{data.grade}}</span></div>
                    <div >{{data.nation}} | {{data.runtime}}</div>
                  </div>
                </div>
            </van-cell>
              </van-list>
    </div>
</template>
<script>
import http from '@/until/http.js'
import Vue from 'vue'
import { List } from 'vant'
Vue.use(List)
// import axios from 'axios'
Vue.filter('actorsFilter', (data) => {
  if (data === undefined) return '暂无主演'
  return data.map(res => res.name).join(' ')
})
export default {

  data () {
    return {
      datalist: [],
      curren: 0,
      finished: false,
      loading: false,
      total: 0

    }
  },
  methods: {
    handlechange (id) {
      this.$router.push({
        name: 'kerwinPlay',
        params: {
          id
        }
      })
      console.log(id)
    },
    onLoad () {
      console.log(this.total, this.datalist.length)
      if (this.datalist.length === this.total && this.total !== 0) {
        this.finished = true
        return
      }
      console.log('dd')
      this.curren++
      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.curren}&pageSize=10&type=2&k=9150766`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        console.log(res)
        this.datalist = [...this.datalist, ...res.data.data.films]
        this.loading = false
      })
    }
  },
  mounted () {
    http({
      url: `gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=2&k=9150766`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      console.log(res.data.data)
      this.datalist = res.data.data.films
      this.total = res.data.data.total + 10
    })
  }
}

</script>
<style lang="scss" scoped>
 .van-list{
    list-style: none;
    padding: 0;
    margin: 0;
  .van-cell{
    padding-bottom: .8125rem;
    overflow: hidden;
    margin:0px;
    img{
      float: left;
      width: 4.125rem;
    }
    .section{
      float: left;
      padding: 0px 10px;
    }
    .title{
      font-size: 16px;
    }
    .center{
      color: gray;
      font-size: 13px;
        .grade{
        color: red;
    }
    .actors{
              overflow: hidden;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 9.375rem;
        }
    }

  }
 }
</style>
